<template>
  <layout-body v-loading="initLoading">
    <div class="categroy-list">
      <template v-for="(item, index) in diyData" :key="index">
        <div
          class="categroy-item"
          :class="activeIndex == index ? 'active' : ''"
          @click="selectedItem(index)"
        >
          <div class="item-title">{{ item.title }}</div>
        </div>
      </template>
    </div>
    <div class="categroy-layout-list">
      <template v-for="(item, index) in diyItem.data" :key="index">
        <div
          class="categroy-layout-item"
          :class="activeLayout == item.layout ? 'active' : ''"
          @click="selectedLayout(item.layout)"
        >
          <img :src="item.img" />
        </div>
      </template>
    </div>
    <div class="diy-save">
      <el-button type="primary" @click="saveClick" :loading="btnLoading"
        >保存</el-button
      >
    </div>
  </layout-body>
</template>
<script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { getDiyCategroy, updateDiyCategroy } from "@/api/store/diy_page";
import { Result, ResultError } from "@/types";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

// const activeItem = ref<>()

interface diyTypeObj {
  level: string;
  title: string;
  data: Array<{
    layout: string;
    img: string;
  }>;
}

const diyData = ref<Array<diyTypeObj>>([]);

const diyItem = ref<diyTypeObj>({
  title: "",
  level: "",
  data: [],
});

const activeIndex = ref<number>(0);

const activeLayout = ref<string>("1_1");

const initLoading = ref<boolean>(true);

const toInitDiyData = () => {
  initLoading.value = true;
  getDiyCategroy()
    .then((res: Result) => {
      diyData.value = res.data.data;
      activeLayout.value = res.data.layout;
      initActiveItem();
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
      initLoading.value = false;
    });
};

const initActiveItem = () => {
  diyData.value.forEach((item: diyTypeObj, index: number) => {
    item.data.forEach((items: { layout: string }) => {
      if (activeLayout.value == items.layout) {
        diyItem.value = item;
        activeIndex.value = index;
        initLoading.value = false;
      }
    });
  });
};

const selectedItem = (index: number) => {
  activeIndex.value = index;
  diyItem.value = diyData.value[index];
  // activeLayout.value = diyItem.value.data[0].layout ;
};

const selectedLayout = (layout: string) => {
  activeLayout.value = layout;
};

const btnLoading = ref<boolean>(false);

const saveClick = () => {
  btnLoading.value = true;
  updateDiyCategroy({ layout: activeLayout.value })
    .then((res: Result) => {
      $utils.successMsg(res.message);
      btnLoading.value = false;
    })
    .catch((err: ResultError) => {
      btnLoading.value = false;
      $utils.errorMsg(err);
    });
};

onMounted(() => {
  toInitDiyData();
});
</script>


<style scoped>
.categroy-list {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.categroy-item {
  padding: 20px 40px;
  cursor: pointer;
  margin-right: 20px;
  margin-bottom: 20px;
  background: #f0f0f0;
  font-size: 16px;
  font-weight: bold;
  user-select: none;
  border-radius: var(--base-radius);
}

.categroy-item.active {
  background: var(--el-color-primary-light-9);
  color: var(--base-default);
}

.categroy-layout-list {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.categroy-layout-item {
  margin-right: 20px;
  margin-bottom: 20px;
  border: 2px solid #f0f0f0;
  width: calc(20% - 24px);
  min-width: 300px;
  max-width: 400px;
  cursor: pointer;
  border-radius: var(--base-radius);
}
.categroy-layout-item.active {
  border-color: var(--base-default);
}
.categroy-layout-item img {
  width: 100%;
}

.diy-save {
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
</style>